/* components */
import { ConnectorModuleRuleForm } from '@src/modules/connector/components'
/* model */
import { ConnectorModuleComponentNameEnum, ConnectorField } from '@src/modules/connector/model'
/* scss */
import '@src/modules/connector/components/connector-dialog-detail/action-query.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, ComputedRef, defineComponent, PropType, Ref, ref, watch } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* types */
import { ConnectorRuleFormItemType } from '@src/modules/connector/types'
/* util */
import { createConnectorRuleFormItem } from '@src/modules/connector/util'
import { t } from '@src/locales'
import { message } from '@src/util/message'

export type ConnectorModuleConnectorDialogDetailActionQueryProps = {
  value: ConnectorRuleFormItemType[];
  fromBizTypeName: string;
  toBizTypeName: string;
  justFixedValue:boolean,
  showHeader:boolean
}

export interface ConnectorModuleConnectorDialogDetailActionQuerySetupState {
  
}

export enum ConnectorModuleConnectorDialogDetailActionQueryEmitEventNameEnum {
  Input = 'input',
  ChangeCondition = 'changeCondition',
}

export type ConnectorModuleConnectorDialogDetailActionQueryInstance = ComponentInstance & ConnectorModuleConnectorDialogDetailActionQuerySetupState
export type ConnectorModuleConnectorDialogDetailActionQueryVM = ComponentRenderProxy<ConnectorModuleConnectorDialogDetailActionQueryProps> & CommonComponentInstance & ConnectorModuleConnectorDialogDetailActionQueryInstance

export default defineComponent({
  name: ConnectorModuleComponentNameEnum.ConnectorModuleConnectorDialogDetailActionQuery,
  emits: [
    ConnectorModuleConnectorDialogDetailActionQueryEmitEventNameEnum.Input,
    ConnectorModuleConnectorDialogDetailActionQueryEmitEventNameEnum.ChangeCondition,
  ],
  props: {
    toFieldList: {
      type: Array as PropType<ConnectorField[]>,
      default: () => ([])
    },
    fromFieldList: {
      type: Array as PropType<ConnectorField[]>,
      default: () => ([])
    },
    value: {
      type: Array as PropType<ConnectorRuleFormItemType[]>,
      default: () => ([])
    },
    fromBizTypeName: {
      type: String as PropType<string>,
      default: ''
    },
    toBizTypeName: {
      type: String as PropType<string>,
      default: ''
    },
    justFixedValue: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    showHeader: {
      type: Boolean as PropType<boolean>,
      default: true
    },
    showText:{
      type:Boolean,
      default: false
    },
    showTitle:{
      type:Boolean,
      default: true
    },
    showSelectTip:{
      type:Boolean,
      default: true
    },
    maxLength: {
      type: Number as PropType<number>,
      default: 0
    },
    conditionalLimit: {
      type: String as PropType<string>,
      default: '1'
    },
    isShowCondition:{
      type:Boolean,
      default: false
    },
    nodeConfig: {
      type: Object,
      default: () => ({}),
    },
    isMultipleChoose: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    
    const toFields: ComputedRef<ConnectorField[]> = computed(() => props.toFieldList)
    const fromFields: ComputedRef<ConnectorField[]> = computed(() => props.fromFieldList)
    
    return {
      toFields,
      fromFields
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.userNameStyleOverlapPolyfill()
    })
  },
  methods: {
    /** 
     * @description 添加查询条件
    */
    addRuleFormItem() {
      let formItem:any = createConnectorRuleFormItem()
      if(this.justFixedValue)formItem.condition = 'fixedValue';
      const newValue = [...this.value, formItem]
      if(this.maxLength && this.value.length >= this.maxLength) {
        message.warning(t('common.connector.maxConditionLength', {length: this.maxLength}))
        return
      }
      this.onValueInputHandler(newValue)
      
    },
    onValueInputHandler(value: ConnectorRuleFormItemType[]) {
      this.$emit(ConnectorModuleConnectorDialogDetailActionQueryEmitEventNameEnum.Input, value)
    },
    /**
     * @description 用户名样式重叠补丁
     */
    userNameStyleOverlapPolyfill() {

      const userInputList: HTMLInputElement[] = (this.$el.querySelectorAll('.user-search input') || []) as unknown as HTMLInputElement[]

      userInputList.forEach(userInputElement => {
        if (userInputElement.value) {
          userInputElement.value = ''
          userInputElement.placeholder = ''
        }
      })

    },
    onChangeCondition(val:any) {
      this.$emit(ConnectorModuleConnectorDialogDetailActionQueryEmitEventNameEnum.ChangeCondition, val)
    },
  },
  render(h: CreateElement) {
    return (
      <div class={ConnectorModuleComponentNameEnum.ConnectorModuleConnectorDialogDetailActionQuery}>
        {
          this.showTitle &&
            <div class="connector-module-connector-dialog-detail-column-header">
              {t('common.connector.title.setDataSearchConditions')}
              <span class="tip">{this.showSelectTip ? t('common.connector.trigger.conditionSettingTip') : ''}</span>
            </div>
          }
        
        <ConnectorModuleRuleForm
          value={this.value}
          isSelect={true}
          toFieldList={this.toFields}
          fromFieldList={this.fromFields}
          fromBizTypeName={this.fromBizTypeName}
          toBizTypeName={this.toBizTypeName}
          onInput={this.onValueInputHandler}
          justFixedValue={this.justFixedValue}
          showHeader={this.showHeader}
          showText={this.showText}
          nodeConfig={this.nodeConfig}
          isMultipleChoose={this.isMultipleChoose}
        />
        
        <div class="connector-module-connector-dialog-detail-action-query-add">
          <el-button 
            plain 
            type="primary"
            onClick={this.addRuleFormItem}
          >
            + {t('common.connector.buttons.addSearchConditions')}
          </el-button>
        </div>
        { this.isShowCondition &&
        <div class="connector-module-connector-dialog-detail-action-config">
          <label>{ t('common.connector.fieldSetting.conditionalLimitLabel') }</label>
          <el-select value={ this.conditionalLimit } onChange={ this.onChangeCondition }>
            <el-option label={t('common.connector.fieldSetting.conditionalLimitTitle1')} value="1"></el-option>
            <el-option label={t('common.connector.fieldSetting.conditionalLimitTitle2')} value="2"></el-option>
          </el-select>
          <el-tooltip popper-class="connector-tooltip" placement="top">
            <div slot="content">
              <div class="tips">
                <p>{t('common.connector.fieldSetting.conditionalLimitTitle1')}：<br/> {t('common.connector.fieldSetting.exampleOne')}</p>
                <p>{t('common.connector.fieldSetting.conditionalLimitTitle2')}：<br/>{t('common.connector.fieldSetting.exampleTwo')}</p>
              </div>
            </div>
            <i class="iconfont icon-question"></i>
          </el-tooltip>
        </div>
        }
      </div>
    )
  }
})
